<script setup>
	// import {
	// 	getGeos
	// } from '@/api/api'
	import * as util from '@/amtf/utils'

	import useapi from '@/api/地址api'
	const api = useapi()

	import { onLoad } from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue'

	// 表单数据
	const 单项 = reactive({
		// 收件姓名: '', // 收货人
		// 收件电话: '', // 联系方式
		// fullLocation: '', // 收件省市县(前端展示)
		// 省份编码: '', // 省份编码(后端参数)
		// 城市编码: '', // 城市编码(后端参数)
		// 区县编码: '', // 区/县编码(后端参数)
		// 收件详细地址: '', // 详细地址
		// 默认否: 0, // 默认地址，1为是，0为否
	})

	// 获取页面参数
	const { id } = defineProps({
		id: String
	})

	const 地址源组 = reactive([])
	const 初始化 = async () => {
		if (id) {
			// 发送请求
			const res = await api.查({ id })
			console.log('查 res: ', res);
			util.对象重予(单项, res.data)
			// from = res.data
			// 把数据合并到表单中
			// Object.assign(from, res.result)
		}
	}

	onLoad(() => {
		初始化()
	})

	// 动态设置标题
	uni.setNavigationBarTitle({ title: id ? '修改地址' : '新建地址' })

	// 收集所在地区
	const 微信用地址变化 = (ev) => {
		单项.收件省市县 = ev.detail.value.join(' ')
		// 收件省市县(后端参数)
		const [省份编码, 城市编码, 区县编码] = ev.detail.code
		Object.assign(单项, { 省份编码, 城市编码, 区县编码 })
	}

	// 收集是否默认收货地址
	const onSwitchChange = (ev) => {
		单项.默认否 = ev.detail.value ? true : false
	}

	// 定义校验规则
	const rules = {
		收件姓名: {
			rules: [{ required: true, errorMessage: '请输入收货人姓名' }],
		},
		收件电话: {
			rules: [
				{ required: true, errorMessage: '请输入联系方式' },
				{ pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
			],
		},
		区县编码: {
			rules: [{ required: true, errorMessage: '请选择所在地区' }],
		},
		收件详细地址: {
			rules: [{ required: true, errorMessage: '请选择详细地址' }],
		},
	}
	const formRef = ref(null)

	import { storeToRefs } from 'pinia'
	import use地址 from '@/stores/use地址'
	const 地址 = use地址()
	const { 选中地址 } = storeToRefs(地址)
	// 提交表单
	const onSubmit = async () => {
		try {
			await formRef.value?.validate?.()
			let res
			if (id) {
				res = await api.改(单项)
			} else {
				res = await api.增(单项)
			}
			// console.log('res: ', res);
			if (res.code == 0) {
				uni.showToast({ icon: 'success', title: id ? '修改成功' : '添加成功' })
				// 返回上一页
				选中地址.value = 单项
				地址.初始化()
				setTimeout(() => {
					uni.navigateBack()
				}, 400)
			} else {
				console.log('出错了 res: ', res);
			}
		} catch (error) {
			uni.showToast({ icon: 'error', title: '请填写完整信息' })
		}
	}

	// #ifdef H5 || APP-PLUS
	const onCityChange = async (ev) => {
		const [province, city, county] = ev.detail.value
		console.log('onCityChange ev.detail.value: ', ev.detail.value);
		// 收集后端所需的 code 数据
		Object.assign(单项, {
			省份编码: province.value,
			城市编码: city.value,
			区县编码: county.value,
		})
		let arr = ev.detail.value.map((item) => item.text)
		单项.收件省市县 = arr.join(' ')
		console.log('单项: ', 单项);
	}
	// #endif
</script>

<template>
	<view class="content">
		<uni-forms :rules="rules" :model="单项" ref="formRef">
			<!-- 表单内容 -->
			<uni-forms-item name="收件姓名" class="form-item">
				<text class="label">收货人</text>
				<input class="input" placeholder="请填写收货人姓名" v-model="单项.收件姓名" />
			</uni-forms-item>
			<uni-forms-item name="收件电话" class="form-item">
				<text class="label">手机号码</text>
				<input class="input" placeholder="请填写收货人手机号码" :maxlength="11" v-model="单项.收件电话" />
			</uni-forms-item>
			<uni-forms-item name="区县编码" class="form-item">
				<text class="label">所在地区</text>
				<!-- #ifdef MP-WEIXIN -->
				<picker @change="微信用地址变化" class="picker" mode="region" :value="单项.收件省市县.split(' ')">
					<view v-if="单项.收件省市县">{{ 单项.收件省市县 }}</view>
					<view v-else class="placeholder">请选择省/市/区(县)</view>
				</picker>
				<!-- #endif -->
				<!-- #ifdef H5 || APP-PLUS -->
				<uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china"
					field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code"
					parent-field="parent_code" @change="onCityChange" :clear-icon="false" v-model="单项.区县编码" />
				<!-- #endif -->
			</uni-forms-item>
			<uni-forms-item name="收件详细地址" class="form-item">
				<text class="label">详细地址</text>
				<input class="input" placeholder="街道、楼牌号等信息" v-model="单项.收件详细地址" />
			</uni-forms-item>
			<view class="form-item">
				<label class="label">设为默认地址</label>
				<switch @change="onSwitchChange" class="switch" color="#27ba9b" :checked="单项.默认否 === 1" />
			</view>
		</uni-forms>
	</view>
	<!-- 提交按钮 -->
	<button @tap="onSubmit" class="button">保存并使用</button>
</template>

<style lang="scss">
	// 深度选择器修改 uni-data-picker 组件样式
	:deep(.selected-area) {
		flex: 0 1 auto;
		height: auto;
	}

	page {
		background-color: #f4f4f4;
	}

	.content {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.form-item,
		.uni-forms-item {
			display: flex;
			align-items: center;
			min-height: 96rpx;
			padding: 25rpx 10rpx;
			background-color: #fff;
			font-size: 28rpx;
			border-bottom: 1rpx solid #ddd;
			position: relative;
			margin-bottom: 0;

			// 调整 uni-forms 样式
			.uni-forms-item__content {
				display: flex;
			}

			.uni-forms-item__error {
				margin-left: 200rpx;
			}

			&:last-child {
				border: none;
			}

			.label {
				width: 200rpx;
				color: #333;
			}

			.input {
				flex: 1;
				display: block;
				height: 46rpx;
			}

			.switch {
				position: absolute;
				right: -20rpx;
				transform: scale(0.8);
			}

			.picker {
				flex: 1;
			}

			.placeholder {
				color: #808080;
			}
		}
	}

	.button {
		height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: #27ba9b;
	}
</style>